import React, {memo, useEffect, useState} from 'react'
import * as api from '../../api'
import Scroll from '../../baseUI/scroll'
import {Container} from './MainStyle.js'
import {connect} from 'react-redux'

import SearchInput from '../../components/searchInput/SearchInput'
import RotationChart from '../../components/main/rotationChart/RotationChart'
import MenuBar from '../../components/main/menuBar/MenuBar'
import MiHome from '../../components/main/miHome/MiHome'
import Recommend from '../../components/main/recommend/Recommend'
import SecondaryMenu from '../../components/main/scondaryMenu/SecondaryMenu'
import Commodity from '../../components/main/commodity/Commodity'
import SecondaryContent from '../../components/main/secondaryContent/SecondaryContent'

import {forceCheck} from 'react-lazyload'  // react-lazyload 图片延迟加载

import backgroundPicture from '../../assets/mainIconfont/背景图.png'
import labelPicture from '../../assets/mainIconfont/标签.png'
import homeData from './home.json'

const Main = (props) => {

  let [page, setPage] = useState(1)
  const [list, setList] = useState([])
  const [detailList, setDetailList] = useState([])
  // const { maindata } = props
  const [display, setDisplay] = useState(false)

  const fetchContect = () => {
    setList([...list, ...homeData.data.list])
    // api.reqContext(page).then(res => {
    //   setList([
    //     ...list,
    //     ...res.data.data.list
    //   ])
    // })
  }

  // const throttled = _.throttle(fetchContect,5000)

  const fetchDetail = () => {
    api.reqDetail().then((res) => {
      setDetailList(res.data.data.detailList)
    })
  }

  useEffect(() => {
    // if (!maindata.length) {
    // 	getMainDataDispatch()
    // }
    fetchContect()
    fetchDetail()
  }, [])

  useEffect(() => {
    fetchContect()
    // throttled()
  }, [page])

  //  上拉加载更多
  const handlePullUp = () => {
    setPage(++page)
  }

  // // 下拉刷新
  // const handlePullDown = () => {

  // }

  const onScroll = () => {
  }

  return (
    <Container>
      <SearchInput
        handleOnclick={() => {
          handleOnclick()
        }}
        display={display}
        // searchBoxHandleOnclick={() => history.push('/search')}
        // style={display? {backgroundColor:'#fff'} : {backgroundColor:'#000'}}
      />

      <Scroll
        direction={"vertical"}
        bounceTop={false}
        onScroll={(e) => {
          forceCheck()  // 图片懒加载
          if (e.y < -1) {
            setDisplay(true)
          } else {
            setDisplay(false)
          }
        }}
        // pullUp={handlePullUp}
        // pullDown={handlePullDown}
      >
        <div className='main'>
          <div className="picture"><img src={backgroundPicture} alt=""/></div>
          <RotationChart/>
          <div className='label'><img src={labelPicture} alt=""/></div>
          <MenuBar/>
          <MiHome/>
          <Recommend/>
          <SecondaryMenu/>
          <Commodity detailList={detailList}/>
          <SecondaryContent list={list}/>
        </div>
      </Scroll>
    </Container>
  )
}

const mapStateToPorps = (state) => {
  return {}
}

const mapStateToDispatch = (dispatch) => {
  return {}
}

export default connect(mapStateToPorps, mapStateToDispatch)(memo(Main))
